<template>
  <view class="container">
    <view class="process-steps">
      <uni-steps :options="setpOptions" :active="currentStep"></uni-steps>
    </view>
    <view class="detail-card">
      <view class="card-title">申请资料</view>
      <view class="info-list">
        <view class="info-itme">
          <text class="label" style="color: #2979ff;">审批单号</text>
          <text class="value" style="color: #2979ff;">#{{formData.id}}</text>
        </view>
        <view class="info-itme">
          <text class="label">申请时间</text>
          <text class="value">{{formData.applyTime}}</text>
        </view>
        <view class="info-itme">
          <text class="label">申请人</text>
          <text class="value">{{formData.employeeName}}</text>
        </view>
        <view class="info-itme">
          <text class="label">请假原因</text>
          <text class="value">{{formData.reason}}</text>
        </view>
        <view class="info-itme">
          <text class="label">开始时间</text>
          <text class="value">{{formData.startTime}}</text>
        </view>
        <view class="info-itme">
          <text class="label">结束时间</text>
          <text class="value">{{formData.endTime}}</text>
        </view>
        <view class="info-itme">
          <text class="label" style="color: #2979ff;">销假状态</text>
          <text class="value" style="color: #2979ff;">{{JudgeRevokeStatus(formData.revokeStatus)}}</text>
          <text class="value-2" v-if="formData.revokeStatus !==0">{{formData.cancelTime}}</text>
        </view>
        <view class="info-itme">
          <text class="label" style="color: #63d0c7;">延假状态</text>
          <text class="value" style="color: #63d0c7;">{{JudgeExtensionStatus(formData.extensionStatus)}}</text>
        </view>
       <view class="info-itme" v-if="formData.extensionStatus === 1 || formData.extensionStatus === 2 ">
          <text class="label">延假时间</text>
          <text class="value">{{formData.postponedTime}}</text>
        </view>
      </view>
    </view>
    <view class="item-actions" v-if="formData.sort !== 'pending'">
       <!-- 多端统一按钮颜色 -->
        <button
          hover-class="revoke-button"
          type="warn"
          :disabled="formData.revokeStatus !== 0 || formData.approvalStatus !== 2"
          @click="submitRevokeRequest(formData.id)"
        >申请销假
        </button>
    </view>
  </view>
</template>

<script>
  import {exposeFormatTime}  from '@/utils/format.js'
  export default {
    data() {
      return {
        formData: {},
        setpOptions: [
          {title: '提交申请'},
          {title: '未审核'},
          {title: '审核中'},
          {title: '审核完成'}
        ],
        currentStep: 0,
      };
    },
    onLoad(options) {
      if(options.List) {
        this.formData = JSON.parse(options.List)
      }
      this.updateCurrentStep()
      this.ReviseformData()
      console.log(this.formData.approvalStatus)
    },
    methods: {
      ReviseformData() {
        this.formData.endTime = exposeFormatTime(this.formData.endTime)
        this.formData.startTime = exposeFormatTime(this.formData.startTime)
        this.formData.applyTime = exposeFormatTime(this.formData.applyTime)
        if(this.formData.postponedTime !== null) {
          this.formData.postponedTime = exposeFormatTime(this.formData.postponedTime)
        }
        if(this.formData.cancelTime !== null) {
          this.formData.cancelTime = exposeFormatTime(this.formData.cancelTime)
        }
      },
      updateCurrentStep() {
        // 根据审批状态更新步骤
        switch(this.formData.approvalStatus) {
          case 0: // 未审核
            this.currentStep = 1
             break;
          case 1: // 审核中
            this.currentStep = 2
             break;
          case 2: // 审核完成
            this.currentStep = 3
            break;
          case 3: 
            this.currentStep = 3
            this.setpOptions[3].title = '审批被驳回'
            break;
          default : 
            this.currentStep = 0
        }
      },
      // 针对延假的方法
      JudgeExtensionStatus(dataStr) {
        switch(dataStr) {
          case 0:
            return '未延期'
          case 1:
            return '申请延期'
          case 2:
            return '同意延期'
          case 3:
            return '不同意延期'
        }
      },
      // 针对销假状态的方法
      JudgeRevokeStatus(dataStr) {
        switch(dataStr) {
          case 0:
            return '未销假'
          case 1:
            return '申请销假中'
          case 2:
            return '已销假'
          case 3:
            return '销假已超时'
        }
      },
     async  submitRevokeRequest(id) {
       try {
         await uni.$http.patch(`/attendance/cancelLeaveRecord/${id}`)
       } catch(error){
         console.log(error)
          uni.$showModal({
            content: '进行销假时出现错误，请稍后再试!!!'
          })
       }
        uni.showModal({
          title: '提示',
          content: '销假成功，请耐心等待部门审核!',
          showCancel: false,
          confirmText: '确认',
          success: (res) => {
            if(res.confirm) {
              uni.$emit('refreshMessageList', { resetPage: true });
              uni.navigateBack()
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    
    .process-steps {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
    }
    .detail-card {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-block-end: solid; 
      writing-mode: horizontal-tb;
      
      .card-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        position: relative;
        padding-left: 20rpx;
        padding-bottom: 30rpx;
        border-bottom: dashed #b5b5b5  3rpx ;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 6rpx;
          height: 30rpx;
          background-color: #2979ff;
          border-radius: 3rpx;
          transform: translateY(-90%);
        }
      }
      .info-list {
        .info-itme {
          display: flex;
          margin-bottom: 20rpx;
          border-bottom: dashed #d0d0d0  1rpx ;
          
          .label {
            width: 160rpx;
            color: #999;
            font-size: 28rpx;
          }
          
          .value {
            flex: 1;
            color: #333;
            font-size: 28rpx;
          }
          .value-2 {
            color: #2979ff;
            font-size: 28rpx;
            
          }
        }
      }
    }
    .item-actions {
      padding: 20rpx;
      border-radius: 12rpx;
      text-align: center;
      
      .revoke-button {
        background-color: #e64340; 
        color: #fff; 
        font-size: 28rpx;
        border-radius: 8rpx;
        padding: 20rpx 40rpx;
        border: none;
        outline: none;
        &:active {
          background-color: darken(#e64340, 10%);
        }
      }
    }
  }
</style>
